<template>
  <div class="layout">
      <Layout>
        <Menu mode="horizontal" class="header" active-name= '4'>
          <div class="layout-logo">
            <img src="../assets/ctbu2.png" alt="" />
          </div>
          <div class="layout-nav">
            <MenuItem name="0"> 首页</MenuItem>
            <MenuItem name="1"> 校庆日程 </MenuItem>
            <MenuItem name="2"> 祝福工商 </MenuItem>
            <MenuItem name="3"> 影像工商 </MenuItem>
            <MenuItem name="4"> 流金岁月 </MenuItem>
          </div>
        </Menu>
        <Content>
          history
        </Content>
        <Footer class="layout-footer-center">2022-2032 &copy; WebDesign</Footer>
      </Layout>
    </div>
</template>

<script>
export default{
  name:"myHead",
  props: {
    msg: String,//用于赋值
  }
}
</script>


<style scoped>
.layout {
  background: #f5f7f9;
  overflow: visible;
}
.header {
  background-color: rgba(255, 255, 255, 1);
  height: 7rem;
  position: sticky;
  top: 0px;
  z-index: 1000;
}
.layout-nav {
  width: 40rem;
  margin: 0.5rem auto;
  margin-right: 2rem;
}
.layout-logo img {
  width: 21rem;
  height: 5rem;
  float: left;
  position: relative;
  top: 0.8rem;
  left: 2rem;
}
</style>